<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
			}
			.container{
				width: 100%;
				/* height: 700px; */
				/* background-color: aquamarine; */
				margin-top: 50px;
				display: grid;
				justify-content: center;
				/* 列 */
				grid-template-rows: 207px 155px 259px;
				/* 行 */
				grid-template-columns: 420px 365px 299px 118px 296px;
				/* 合并内容 */
				grid-template-areas: 'a b d d f'
				                     'a b e h h'
									 'a c e h h'
				;
				/* 行与列的间距 */
				gap: 3px;
			}
			.item:nth-child(1){
				grid-area: a;
			}
			.item:nth-child(2){
				grid-area: b;
			}
			.item:nth-child(3){
				grid-area: c;
			}
			.item:nth-child(4){
				grid-area: d;
			}
			.item:nth-child(5){
				grid-area: e;
			}
			.item:nth-child(6){
				grid-area: f;
				background-color: pink;
			}
			.item:nth-child(7){
				grid-area: h;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item">
				<img src="img/instagram-01.jpg" width="100%" height="100%" />
			</div>
			<div class="item">
				<img src="img/instagram-02.jpg" width="100%" height="100%" />
			</div>
			<div class="item">
				<img src="img/instagram-03.jpg" width="100%" height="100%" />
			</div>
			<div class="item">
				<img src="img/instagram-04.jpg" width="100%" height="100%" />
			</div>
			<div class="item">
				<img src="img/instagram-05.jpg" width="100%" height="100%" />
			</div>
			<div class="item"></div>
			<div class="item">
				<img src="img/instagram-06.jpg" width="100%" height="100%" />
			</div>
		</div>
	</body>
</html>
